<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>学生选课管理系统</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link href="/assets/css/bootstrap.css" rel="stylesheet" />
        <link href="/assets/css/main.css" rel="stylesheet" />
        <link rel="stylesheet" href="/assets/css/iconfont.css">
        <!--以下是jqGrid的样式文件-->
        <link rel="stylesheet" type="text/css" media="screen" href="/assets/css/ui.jqgrid.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="/assets/css/jquery-ui-1.8.16.custom.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="/assets/css/common.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="/assets/css/listMenu.css" />
        <link rel="stylesheet" href="/assets/css/tip-green.css">
        <!--上面是jqGrid的样式文件-->
        <link rel="stylesheet" href="/assets/css/my.css">
        <link rel="icon" href="/assets/img/ico/favicon.ico" type="image/png">
    </head>
    <body>
        <% include ./common/header.ejs %>
        <% include ./common/siderbar.ejs %>
        <div id="content">
            <div class="row">
                <div class="col-lg-12 heading">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="javascript:;">课程清单</a></li>
                        <li><a href="/admin/course/import">导入课程</a></li>
                        <li><a href="/admin/course/add">逐个添加课程</a></li>
                    </ul>
                </div>
            </div>
            <div class="panel panel-default">
                <a id="show_tips" href="#"></a>
                <div class="panel-body">
                    <!--<a href="/student/download" class="btn btn-success" style="float: right;">下载学生数据</a>-->
                    <div class="container">
                        <div class="row col-md-4 col-md-offset-4 keyword_div">
                            <input type="text" placeholder="请输入查询关键词" id="keyword" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
                        </div>
                    </div>
                    <table id="list"></table>
                    <div id="pager"></div>
                    <input type="button" value="删除" class="btn btn-danger" id="delete_cou">
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
        <script src="/assets/js/jquery-1.8.3.min.js"></script>
        <script src="/assets/js/jquery.jqGrid.src.js" type="text/javascript"></script>
        <script src="/assets/js/grid.locale-cn.js" type="text/javascript"></script>
        <script src="/assets/js/listMenu.js" type="text/javascript"></script>
        <script src="/assets/js/bootstrap/bootstrap.js"></script>
        <script src="/assets/js/jquery.poshytip.js"></script>
    </body>
</html>

<script>
    $(function () {
        var table_name = {
            cid: '学号',
            cname: '姓名',
            number: '人数',
            teacher: '老师',
            dayofweek: '上课时间',
            allow: '可选年级',
            briefintro: '课程简介'
        }
        pageInit();

        function pageInit(){
            var lastsel3;
            $("#list").jqGrid(
                {
                    url : '/course',
                    datatype : "json",
                    colNames : [ '课程号', '课程名', '上课时间', '限制人数', '可选年级', '代课老师', '课程描述' ],
                    colModel : [
                        {name : 'cid',index : 'cid', align : "center", width: 20, key: true},
                        {name : 'cname',index : 'cname', align : "center", width: 50, editable : true},
                        {
                            name : 'dayofweek',
                            index : 'dayofweek',
                            align : "center",
                            width: 30,
                            edittype: 'select',
                            editoptions:{
                                value: "周一: 周一; 周二: 周二; 周三: 周三; 周四: 周四; 周五: 周五; 周六: 周六; 周日: 周日"
                            },
                            editable : true
                        },
                        {name : 'number', index : 'number', align : "center",width: 30, editable : true },
                        {
                            name : 'allow',
                            index : 'allow',
                            align : "center",
                            width: 60,
                            editable : true,
                        },
                        {name: 'teacher', index: 'teacher', editable: true, align: 'center',width: 30} ,
                        {name : 'briefintro', index: 'briefintro', align: "center", edittype: 'textarea', editable : true},
                    ],
                    rowNum : 10,
                    rowList : [ 10, 20, 30 ],
                    sortname : 'cid',
                    viewrecords : true,
                    autowidth: true,
                    pager : '#pager',
                    width: '100%',
                    height: '100%',
                    multiselect : true,
                    caption : "可选课程清单",
                    ondblClickRow : function(id) {
                        $("#list").jqGrid('editRow',id, {
                            oneditfunc: allowChoose,
                            keys : true,
                            url: '/course/' + id,
                            mtype : "POST"
                        });
                    }
                });

            function allowChoose(id) {
                $('#' + id + '_allow').hide()
                var result = $('#' + id + '_allow').val();
                var tempArr = result.split(',');

                $('#' + id + '_allow').after(`<br><label><input type='checkbox' value='初一'/>初一</label><label><input type='checkbox' value='初二'/>初二</label><label><input type='checkbox' value='初三'/>初三</label><label> <input type='checkbox' value='高一'/>高一</label><label><input type='checkbox' value='高二'/>高二</label><label><input type='checkbox' value='高三'/>高三</label>`)

                var labels = $('#' + id + '_allow').siblings('label');
                $(labels.children()).each(function (index, item) {
                    if (tempArr.includes(item.value)) {
                        item.checked = true
                    }
                })

                $(labels.children()).change(function () {
                    if (this.checked) {
                        tempArr.push($(this).val())
                    }else {
                        tempArr.splice(tempArr.indexOf( $(this).val() ), 1)
                    }
                    $('#' + id + '_allow').val(tempArr)
                })

                $('#' + id + '_briefintro').on('keydown', function (e) {
                    if (e.keyCode === 13) {
                        $("#list").jqGrid('saveRow',id, {
                            url: '/course/' + id,
                            mtype : "POST"
                        });
                    }
                })

            }

            //动态结果搜索
            $("#keyword").on("input", function () {
                var keyword = $(this).val();
                $("#list").jqGrid('setGridParam',{
                    datatype:'json',
                    postData:{'keyword': keyword}, //发送数据
                    page:1
                }).trigger("reloadGrid"); //重新载入

                //提示列表更新
                $('#show_tips').poshytip({
                    content: '列表数据已更新',
                    className: 'tip-green',
                    showOn: 'none',
                    alignTo: 'target',
                    alignX: 'inner-left',
                    offsetX: -10,
                }).poshytip('show').poshytip('hideDelayed', 2000);
                $("#list").trigger("reloadGrid");
            })

            //获得多选的数据
            $("#delete_cou").click(function() {

                if (!confirm('确认要删除吗？此操作不能恢复！')) {
                    return
                }

                var sel_rows = $("#list").jqGrid('getGridParam', 'selarrrow');
                $.ajax({
                    url: '/course',
                    type: 'delete',
                    data: {
                        sel_rows
                    },
                    traditional: true,
                    success: function (data) {
                        if (data.result !== -1) {
                            alert('删除成功！')
                        }else {
                            alert('删除失败！')
                        }
                        $("#list").trigger("reloadGrid");
                    }
                })
            });
        }

        //自适应
        $(function(){
            $(window).resize(function(){
                $("#list").setGridWidth($('.panel-body').width());
            });
        });


    })
</script>